<template>
	<div class="login">
		<!--登录表单-->
		<div v-if="isLoginVisible">
			<div class="head">
				<img src="@/assets/img/vip.png">
				<div v-show="loginmessage">
					<p>会员登录</p>
					<p>Member Login</p>
					<p v-show="isnameerror" class="error" style="color: red;">{{usererr}}</p>
					<p v-show="ispasserror" class="error" style="color: red;">{{passerr}}</p>
					<p v-show="isyanzhengerror" class="error" style="color:red;">{{yanzhengerr}}</p>
				</div>
				<div v-show="usermessage">
					<p>下午好,{{name}}</p>
					<p>{{userstatu}}</p>
					<router-link to="/adminman" v-show="adminback" class="admin">后台管理</router-link>
					<a style="color: royalblue;margin-left: 30px;cursor:pointer" href="#" @click="outlog">退出登录</a>
				</div>
			</div>
			<div v-if="isLogin" class="userinfo">
				<p>用户名:<input type="text" name="username" id="username" placeholder="请输入用户名" required="required"
						v-model='username' @focus="userfoc()" /></p>
				<p style="height: 2px"></p>
				<p>密&ensp;&ensp;码:<input type="password" name="password" id="password" placeholder="请输入密码"
						required="required" v-model='password' @focus="passfoc()()"/></p>
				<p>验证码:<input style="width: 140px;height: 20px;" type="text" placeholder="请输入验证码" class="input-val"
						v-model.trim="yanzhen" @keyup.enter="login_enter" /></p>
				<canvas id="canvas" width="100" height="30" @click="handleCanvas"> </canvas>
				<p class="btn">
					<input type="button" class="loginbtn" value="登录" @click="login()">
					<input type="button" class="registerbtn" value="注册" @click="toRegisterOrLogin">
				</p>
			</div>
			<div v-show="ismessage" class="ismessage">
				<p>姓名:{{uname}}</p>
				<p>积分:{{point}}</p>
				<p>余额:{{balance}}</p>
			</div>
		</div>

		<!--注册表单-->
		<div v-if="isRegisterVisible">
			<div class="head">
				<img src="@/assets/img/vip.png">
				<p>会员注册</p>
				<p>Member Login</p>
			</div>
			<div class="userinfo">
				<p>会员名：<input type="text" v-model="regusername"></p>
				<p>密&nbsp;&nbsp;&nbsp;码：<input type="password" v-model="regpassword"
						@blur="regblu(regpassword,againpass)"></p>
				<p>确&nbsp;&nbsp;&nbsp;认：<input type="password" name="actPassword" v-model="againpass"
						@blur="againblu(regpassword,againpass)"></p>
				<p class="againerror" v-show="isagainerror">{{againerror}}</p>
				<p class="allerror" v-show="isallerror">{{allerror}}</p>
				<p class="btn">
					<input type="button" value="注册" @click="register(regusername,regpassword,againpass)">
					<input type="reset" @click="toRegisterOrLogin" value="去登录">
				</p>
			</div>
		</div>
	</div>
</template>

<script>
	import axios from "axios";

	export default {
		name: "Login",
		data() {
			return {
				name: '',
				uname: '',
				gender: '',
				point: '',
				balance: '',
				username: '',
				password: '',
				regusername: '',
				regpassword: '',
				againpass: '',
				usererr: '用户名不能为空!',
				passerr: '密码不能为空!',
				yanzhengerr:'验证码错误!',
				againerror: '两次输入的密码不一致!',
				allerror: '',
				userstatu: '',
				isallerror: true,
				isLogin: true,
				isLoginVisible: true,
				isRegisterVisible: false,
				isnameerror: false,
				ispasserror: false,
				isyanzhengerror:false,
				isagainerror: false,
				loginmessage: true,
				usermessage: false,
				ismessage: false,
				adminback: false,
				usermes: [],
				//20211112
				yanzhen: "", //输入框双向绑定的值
				true_code: "", //保存正确的验证码
				yanzhen_arr: [], //只用于传参，并且数组长度不能「多于」下面验证码遍历的次数，不然最终得到的true_code会有问题 
				//比如下面是4个验证码，可以是[1,2,3,4]及以下，但是不能是[1，2，3，4，5]， 因为5无法被替换

			}
		},
		mounted() {
			this.draw(this.yanzhen_arr)
		},
		methods: {
			regblu(regpassword, againpass) {
				if (regpassword == againpass) {
					this.isagainerror = false
				}
			},
			againblu(regpassword, againpass) {
				if (regpassword != againpass) {
					this.isallerror = false
					this.isagainerror = true
				} else if (regpassword == againpass) {
					this.isallerror = false
					this.isagainerror = false
				}
			},
			userblu(username) {
				if (username == '') {
					this.isnameerror = true;
				}
			},
			userfoc() {
				this.isnameerror = false;
			},
			passblu(password) {
				if (password == '') {
					this.ispasserror = true;
				}
			},
			passfoc() {
				this.ispasserror = false;
			},
			toRegisterOrLogin() {
				this.isLoginVisible = !this.isLoginVisible
				this.isRegisterVisible = !this.isRegisterVisible
				this.username = ''
				this.password = ''
				this.regusername = ''
				this.regpassword = ''
				this.againpass = ''
			},
			register(regusername, regpassword, againpass) { //注册
				if (regusername == '' || regpassword == '' || againpass == '') {
					this.allerror = "请填写所有数据!"
					this.isallerror = true

				} else {
					axios.post('http://localhost:8080/user/register', 'username=' + this.regusername + '&password=' + this
							.regpassword)
						.then(res => {
							alert(res.data)
						})
						.catch(function(error) {
							alert("网络连接错误...")
							console.log("网络连接错误...");
						});
				}
			},
			outlog(){		//退出登录
				axios.get('http://localhost:8080/user/outlog')
					.then(res => {
						location.reload()
					})
					.catch((error) => {
						console.log(error)
						this.$message.error("网络连接异常...请稍后重试...");
					});
			},
			login() { //登录
				if (this.username == "") {
					this.isnameerror = true;
					this.ispasserror = false;
					this.isyanzhengerror = false;
				} else if (this.password == "") {
					this.ispasserror = true;
					this.isnameerror = false;
					this.isyanzhengerror = false;
				} else if(this.yanzhen==""){
					this.isyanzhengerror = true;
					this.ispasserror = false;
					this.isnameerror = false;
				} else if(this.yanzhen!=this.true_code && this.yanzhen!= ""){
					this.isyanzhengerror = true;
					this.ispasserror = false;
					this.isnameerror = false;
				}
				else {
					axios.post('http://localhost:8080/user/login', 'username=' + this.username + '&password=' + this
							.password)
						.then(res => {
							alert(res.data)
							if (res.data == '恭喜您登陆成功') {
								this.name = this.username
								this.adminback = false
								this.loginmessage = false
								this.isLogin = false
								this.usermessage = true
								this.userstatu = '您是本店的会员'
								this.ismessage = true
								if (this.username == 'admin') {
									this.adminback = true
									this.userstatu = '您是本店的超级管理员'
								}
							}
							this.getuser()
						})
						.catch((error) => {
							console.log(error)
							this.$message.error("网络连接异常...请稍后重试...");
						});
				}
			},
			getuser() {
				var _this = this;
				axios.post('http://localhost:8080/usermessage/findbyname')
					.then(res => {
						_this.uname = res.data.name
						_this.gender = res.data.gender
						_this.point = res.data.point
						_this.balance = res.data.balance
					})
			},
			//20211115 新增验证码功能
			//显示验证码区域内容信息
			draw(show_num) {
				var canvas_width = document.querySelector("#canvas").clientWidth;
				var canvas_height = document.querySelector("#canvas").clientHeight;
				var canvas = document.getElementById("canvas"); //获取到canvas
				var context = canvas.getContext("2d"); //获取到canvas画图
				canvas.width = canvas_width;
				canvas.height = canvas_height;
				var sCode =
					"a,b,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
				var aCode = sCode.split(",");
				var aLength = aCode.length; //获取到数组的长度

				//4个验证码数
				for (var i = 0; i <= 3; i++) {
					var j = Math.floor(Math.random() * aLength); //获取到随机的索引值
					var deg = (Math.random() * 30 * Math.PI) / 180; //产生0~30之间的随机弧度
					var txt = aCode[j]; //得到随机的一个内容
					show_num[i] = txt.toLowerCase(); // 依次把取得的内容放到数组里面
					var x = 10 + i * 20; //文字在canvas上的x坐标
					var y = 20 + Math.random() * 8; //文字在canvas上的y坐标
					context.font = "bold 23px 微软雅黑";

					context.translate(x, y);
					context.rotate(deg);

					context.fillStyle = this.randomColor();
					context.fillText(txt, 0, 0);

					context.rotate(-deg);
					context.translate(-x, -y);
				}
				//验证码上显示6条线条
				for (var i = 0; i <= 5; i++) {
					context.strokeStyle = this.randomColor();
					context.beginPath();
					context.moveTo(
						Math.random() * canvas_width,
						Math.random() * canvas_height
					);
					context.lineTo(
						Math.random() * canvas_width,
						Math.random() * canvas_height
					);
					context.stroke();
				}
				//验证码上显示31个小点
				for (var i = 0; i <= 30; i++) {
					context.strokeStyle = this.randomColor();
					context.beginPath();
					var x = Math.random() * canvas_width;
					var y = Math.random() * canvas_height;
					context.moveTo(x, y);
					context.lineTo(x + 1, y + 1);
					context.stroke();
				}

				//最后把取得的验证码数组存起来，方式不唯一
				var num = show_num.join("");
				// console.log(num);
				this.true_code = num
			},
			//得到随机的颜色值
			randomColor() {
				var r = Math.floor(Math.random() * 256);
				var g = Math.floor(Math.random() * 256);
				var b = Math.floor(Math.random() * 256);
				return "rgb(" + r + "," + g + "," + b + ")";
			},
			//canvas点击刷新
			handleCanvas() {
				this.draw(this.yanzhen_arr);
			},
		}
	}
</script>

<style scoped>
	.login {
		float: right;
		width: 240px;
		height: 240px;
		background-image: linear-gradient(135deg, #2c7288, #b7e0d8);
	}

	.head {
		height: 70px;
		width: 240px;
		background-color: #174958;
		vertical-align: middle;
		color: white;
	}

	.head>img {
		margin: 5px 10px auto 10px;
		width: 60px;
		float: left;
	}

	.head>p:nth-of-type(1) {
		padding-top: 12px;
	}

	.userinfo {
		padding-left: 14px;
	}

	.userinfo>form {
		margin-left: 5px;
	}

	.userinfo .error {
		color: red;
		margin-left: 50px;
	}

	input:nth-of-type(1) {
		margin-top: 10px;
	}

	.againerror {
		color: red;
		float: left;
	}

	.allerror {
		color: red;
		float: left;
	}

	.btn>input:nth-of-type(1) {
		margin: 15px 10px 20px 40px;

	}

	.btn>input {
		margin: 5px;
		width: 62px;
		height: 26px;
		border-radius: 4px;
		background-color: whitesmoke;
		cursor: pointer;
		color: #0a0a0a;
		font-size: 14px;
		box-shadow: 1px 1px 1px #174958;
	}

	.btn>input:hover {
		color: coral;
		box-shadow: none;
		border: 2px solid deepskyblue;

	}

	.admin {
		color: orange;
		text-decoration: none;
	}

	.ismessage {
		float: left;
	}

	.ismessage p {
		font-size: 20px;
		margin-left: 5px;
		margin-top: 5px;
	}

	#canvas {
		float: left;
		margin-left:102px ;
		display: block;
		border: 1px solid #ccc;
		border-radius: 5px;
		cursor: pointer;

	}

	.input-val {
		width: 50%;
		background: #ffffff;
		height: 2.8rem;
		border: none;
		padding: 0 0 0 12px;
	}
</style>
